<template>
  <div class="ver-layout">
    <el-card :body-style="{paddingBottom:0}">
      <el-form :model="formData" inline size="mini" label-width="70px">
        <el-form-item label="设备信息">
          <el-input class="form-input" style="width: 200px" clearable placeholder="设备信息" v-model="formData.device_id"
                    @change="queryList"></el-input>
        </el-form-item>
        <el-form-item label="聊天信息">
          <el-input class="form-input" clearable placeholder="聊天信息" v-model="formData.content"
                    @change="queryList"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select class="form-input" clearable placeholder="请选择" v-model="formData.role" @change="queryList">
            <el-option label="用户" value="user"/>
            <el-option label="ai" value="assistant"/>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker class="form-date-select" v-model="formData.dateTime" type="datetimerange"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          :default-time="['12:00:00']" @change="queryList">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="hor-layout-center">
            <div style="flex: 1"></div>
            <el-button type="primary" size="mini" @click="queryList">搜索</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table :data="messageList" border fit stripe center highlight-current-row size="small" style="width: 100%">
        <el-table-column prop="id" label="id" show-overflow-tooltip width="40"/>
        <el-table-column prop="device_id" label="设备id" show-overflow-tooltip></el-table-column>
        <el-table-column prop="content" label="聊天信息">
          <template slot-scope="scope">
            <el-button class="single-line-btn" type="text" size="mini" @click="showMessageDetail(scope.row)">
              {{ scope.row.content }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.role=='user'" effect="light" type="primary" size="small">
              {{ scope.row.role }}
            </el-tag>
            <el-tag v-else effect="light" type="success" size="small">{{ scope.row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="时间" show-overflow-tooltip/>
      </el-table>
      <div class="hor-layout">
        <div style="flex: 1"></div>
        <el-pagination class="table-pager" small background layout="prev, pager, next, total"
                       :page-size="queryParams.pageSize" :current-page.sync="queryParams.current"
                       :total="queryParams.total" @current-change="queryList"/>
      </div>
    </el-card>
    <el-dialog title="聊天信息" :visible.sync="dialogVisible" width="50%">
      <el-card>
        <div class="scroll-y-layout">
          <template v-for="(aItem,aIdx) in messageObj.content">
            <div v-if="aItem.type=='text'" class="chat-content-text">{{ aItem.data }}</div>
            <div v-if="aItem.type=='code'" class="chat-code">
              {{ aItem.data }}
            </div>
          </template>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import {openAiApi} from "@/api/openai";

export default {
  name: "history",
  data() {
    return {
      messageList: [],
      formData: {
        device_id: '',
        content: '',
        role: '',
        dateTime: '',
      },
      queryParams: {
        pageSize: 10,
        pageNum: 0,
        total: 0,
        current: 1
      },
      messageObj: {
        content: ''
      },
      dialogVisible: false
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        this.messageList = []
        this.queryParams.current = 1
        this.queryParams.total = 0
      },
      deep: true
    },
  },
  mounted() {
    this.queryList()
  },
  methods: {
    queryList() {
      let {current, pageSize} = this.queryParams
      let pageNum = pageSize * (current - 1)
      openAiApi.getAllMessage({...this.formData, ...this.queryParams, pageNum}).then(res => {
        this.messageList = res.data.list
        this.queryParams.total = res.data.total
      })
    },
    convertStrList(str) {
      let str_list = str.split("```")
      str_list = str_list.map((item, index) => {
        if ((index + 1) % 2 != 0) return {type: 'text', data: item}
        else return {type: 'code', data: item}
      })
      return str_list
    },
    showMessageDetail(item) {
      this.dialogVisible = true
      let content = this.convertStrList(item.content)
      console.log("showMessageDetail", content)
      this.messageObj = {...item, content, content1: item.content}
    }
  }
}
</script>

<style scoped>
.form-input {
  width: 120px;
}

.form-date-select {
  width: 320px;
}

.table-pager {
  margin-top: 15px;
}

.single-line-btn {
  width: 100% !important;
  display: flex;
}

/deep/ .single-line-btn > span {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.scroll-y-layout {
  max-height: 60vh;
  overflow-y: auto;
}

.chat-code {
  white-space: pre-wrap;
  background-color: #272822;
  margin-right: 20px;
  padding: 10px 16px;
  color: #f8f8f2;
  overflow: auto;
  font-size: 85%;
  line-height: 1.5;
  border-radius: 3px;
}

.chat-content-text {
  white-space: pre-wrap;
  font-size: 90%;
  line-height: 1.6;
}
</style>
